<template>
  <!-- 购买须知弹窗 -->
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="购买须知"
    width="90%"
    class="notice-dialog"
  >
    <div class="notice-content">
      <div class="notice-item">
        <span class="notice-number">1</span>
        <div class="notice-text">
          <h4>年龄限制</h4>
          <p>建议12岁以上观众参与VR体验，12岁以下儿童需成人陪同</p>
        </div>
      </div>
      <div class="notice-item">
        <span class="notice-number">2</span>
        <div class="notice-text">
          <h4>健康提醒</h4>
          <p>患有心脏病、高血压、孕妇等不适宜参与VR体验</p>
        </div>
      </div>
      <div class="notice-item">
        <span class="notice-number">3</span>
        <div class="notice-text">
          <h4>提前到场</h4>
          <p>请提前15分钟到达现场，逾期视为自动放弃</p>
        </div>
      </div>
      <div class="notice-item">
        <span class="notice-number">4</span>
        <div class="notice-text">
          <h4>特殊情况</h4>
          <p>如有特殊情况，请提前2小时联系我们：(020) 8521-8888</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['update:visible'])
</script>

<style scoped>
/* 弹窗样式 */
:deep(.notice-dialog) {
  border-radius: 15px;
  overflow: hidden;
}

:deep(.notice-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 20px;
  margin: 0;
}

:deep(.notice-dialog .el-dialog__title) {
  color: white;
  font-weight: bold;
}

/* 须知内容 */
.notice-content {
  padding: 6px;
}

.notice-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.notice-item:last-child {
  margin-bottom: 0;
}

.notice-number {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  flex-shrink: 0;
}

.notice-text h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.notice-text p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}
</style> 